<template>
  <div class="dictionaryManage">
    <el-dialog :title="editAddFlag>-1?'编辑':'新增'" :visible.sync="dialogVisible" width="30%">
      <el-form label-position="left" label-width="80px">

        <el-form-item label="电器名称">
          <el-input v-model="tableOne.name"></el-input>
        </el-form-item>
        <el-form-item label="电器状态">
          <el-switch
                  style="display: block"
                  v-model="tableOne.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="开启"
                  active-value='开启'
                  inactive-text="关闭"
                  inactive-value='关闭'>
          </el-switch>
        </el-form-item>
        <el-form-item label="标识值">
          <el-input v-model="tableOne.eleappcode"></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="tableOne.sort"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="tableOne.remark"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="tableOne.createby"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <div class="cardWrap">
          <div class="headerLeft">
            <el-input v-model="selectname" placeholder="输入门牌号或开关状态"></el-input>
            <el-button type="primary" @click="selectAll">查询</el-button>
          </div>
          <div class="headerRight">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
          </div>
        </div>
      </div>
      <div class="item">
        <table-template
                :pageSizes="[5, 10, 15]"
                :pageSize="limit"
                @currentPage="pageChange"
                :totalPage="totalPage"
                :editable="true"
                @receiveEdit="edit"
                @receiveDel="del"
                :tableData="tableData"
                :tableHeader="tableHeader"
        ></table-template>
      </div>
    </el-card>
  </div>
</template>

<script>
    import tableTemplate from "../../../../components/tableTemplate";
    import { list } from "../../../../api/bishe/eleapp";
    import { update } from "../../../../api/bishe/eleapp";
    import { remove } from "../../../../api/bishe/eleapp";
    import { save } from "../../../../api/bishe/eleapp";

    export default {
        components: {
            tableTemplate
        },
        data() {
            return {
                selectname:"", //查询条件
                chosevalue: "", //筛选框
                editAddFlag: null, //编辑或添加标识
                dialogVisible: false, //dialog显示flag

                limit:5,
                currentPage:1,
                totalPage: 0,
                tableOne: {},
                tableData: [],
                tableHeader: [
                    { prop: "name", label: "电器名称" },
                    { prop: "status", label: "电器状态" },
                    { prop: "eleappcode", label: "标识值" },
                    { prop: "housecode", label: "门牌号" },
                    { prop: "roomcode", label: "房间名称" },
                    { prop: "createtime", label: "创建时间" },
                    { prop: "updatetime", label: "更新时间" },
                    { prop: "remark", label: "备注" }
                ]
            };
        },
        created() {
            this.selectAll();
        },

        computed: {
            // options() {
            //   return this.$store.state.options;
            // },
            //
            // treeData() {
            //   return this.$store.state.treeData;
            // }
        },

        methods: {
            selectAll() {
                const payload = {
                    selectname:this.selectname,
                    page: +this.currentPage,
                    limit: this.limit
                }
                list(payload)
                    .then(res => {
                        this.tableData = res.data.rows;
                        this.totalPage =  Math.ceil((res.data.total)/this.limit);
                        if (res.data.rows.length == 0 && this.currentPage != 1) {
                            this.currentPage = String(--this.currentPage);
                            this.selectAll();
                        }
                    })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        });
                    });
            },
            sizeChange(e) {
                const payload = {
                    id: e
                };
                shiftCircuitPageSizeChange(payload).then(res => {
                    this.selectAll();
                })
            },
            pageChange(index) {
                this.currentPage = index + "";
                this.selectAll();
            },

            //单机弹框的按钮保存之类的操作
            sure() {
                //弹框关闭
                this.dialogVisible = false;
                if (this.editAddFlag > -1) {
                    //编辑
                    update(this.tableOne)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.dialogVisible = true;
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                } else {
                    //新增
                    save(this.tableOne)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.dialogVisible = true;
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                }
            },
            add() {
                this.editAddFlag = -1000;
                this.dialogVisible = true;
                this.tableOne = {};
            },
            edit(row) {
                this.editAddFlag = 1000;
                this.dialogVisible = true;
                this.tableOne = row;
            },
            del(row) {
                console.log(row);
                var id = row.eleappid;
                var sendData = [id];
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    };
</script>

<style lang='less' scoped>
  .dictionaryManage {
    width: 98.5%;
    height: 100%;
    padding: 10px;
    .cardWrap {
      display: flex;
      justify-content: space-between;
      height: 60px;
      padding: 0 60px;
      height: 40px;
      .headerLeft{
        .el-input{
          width: auto;
          margin-right: 10px
        }
        display: flex;
        justify-content: space-between
      }
      span {
        margin-right: 30px;
      }
    }
  }
</style>
